<div class="box box-skin main-content">
	<div class="box-body no-padding">
	    <div id="toolbar">
			<div class="form-inline" role="form"><!-- 
		    	<div class="form-group btn-group">
					<button type="button" class="btn btn-default btn-flat" onclick="CRUDCustomerFunc(1);" title="添加"><i class="fa fa-plus"></i></button>
                    <button type="button" class="btn btn-default btn-flat" onclick="CRUDCustomerFunc(5);" title="批量删除"><i class="fa fa-trash"></i></button>
                </div> -->
                <div class="form-group">
                    <input type="text" class="form-control" name="likeMap[real_name]" placeholder="姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="likeMap[tel]" placeholder="手机号">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="likeMap[card_no]" placeholder="会员卡号">
                </div>
		    	<div class="form-group btn-group">
                	<button type="button" class="btn btn-default btn-flat" onclick="searchFunc();" title="搜索"><i class="fa fa-search"></i></button>
                	<button type="button" class="btn btn-default btn-flat" onclick="reloadFunc();" title="重新加载"><i class="fa fa-refresh"></i></button>
                   </div>
            </div>
	    </div>
		<table id="table"></table>
	</div>
</div>

<script type="text/javascript" src="__TMPL__Public/pages/customer/customer.js"></script>
<script type="text/javascript">
$(function() {
	$('#table').bootstrapTable({
		classes: 'table table-no-bordered table-hover',
		striped: true,
		toolbar: '#toolbar',
		showColumns: true,
	    showPaginationSwitch: true,
	    pagination: true,
		sidePagination: 'server',
		pageSize: 15,
		pageList: '[10, 15, 50, 100, All]',
		queryParams: queryParams,
		queryParamsType: 'limit',
		sortName: 'id',
		sortOrder: 'desc',
		url: "{:U('Customer/Customer/dataList')}",
	    idField: 'id',
	    columns: [{
            field: 'state',
            checkbox: true,
            visible: false,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '照片',
	        field: 'avatar',
            visible: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value != '' ? '<img src="' + value + '" class="" alt="no pic" style="height: 45px; display: block;">' : '<img src="__TMPL__Public/assets/img/nopic64.png" class="" alt="no pic" style="height: 45px; display: block;">';
            },
        }, {
	        title: 'ID',
	        field: 'id',
	        sortable: true,
            visible: false,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
/* 	        title: '登录名',
	        field: 'username',
	        sortable: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, { */
	        title: '姓名',
	        field: 'real_name',
	        sortable: true,
            visible: true,
//			width: '20%',
            align: 'left',
            valign: 'middle',
	    }, {
	        title: '性别',
	        field: 'sex',
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	if (value == 1) {
            		return '<span class="text-aqua">男</span>';
            	} else if (value == 2) {
            		return '<span class="text-red">女</span>';
            	} else {
            		return '<span class="text-muted">保密</span>';
            	}
            },
	    }, {
	        title: '手机',
	        field: 'tel',
//			width: '20%',
            align: 'left',
            valign: 'middle',
 	    }, {
	        title: '住址',
	        field: 'address',
//			width: '20%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value != '' && value != null ? value : '<span class="text-gray">未填写</span>';
    		},
	    }, {
	        title: '家庭角色',
	        field: 'fam_role',
            width: '10%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value != '' && value != null ? value : '<span class="text-gray">无</span>';
    		},
	    }, {
	        title: '用户角色',
	        field: 'role',
            width: '10%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value == 1 ? '<span class="text-green">普通用户</span>' : '<span class="text-red">录入员</span>';
    		},
	    }, {
	        title: '会员卡号',
	        field: 'card_no',
            width: '10%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	return value != '' && value != null ? value : '<span class="text-gray">无</span>';
    		},
	    }, {
	        title: '会员卡等级',
	        field: 'card_lv',
            width: '10%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
            	/* var lvName = [ "限制会员", "普通会员", "高级会员", "金牌会员", "钻石会员" ];
            	return value != '' && value != null ? lvName[value - 1] : '<span class="text-gray">无</span>'; */
            	
            	var str = '';
            	switch (parseInt(value)) {
				case 1:
					str = '<span class="text-muted">限制会员</span>';
					break;
				case 2:
					str = '<span class="text-red">普通会员</span>';
					break;
				case 3:
					str = '<span class="text-green">高级会员</span>';
					break;
				case 4:
					str = '<span class="text-aqua">金牌会员</span>';
					break;
				case 5:
					str = '<span class="text-light-blue">钻石会员</span>';
					break;
				default:
					str = '<span class="text-gray">非会员</span>';
					break;
				}
            	return str;
    		},
		}, {
            title: '操作',
            field: 'operate',
            width: '15%',
            align: 'left',
            valign: 'middle',
            formatter: function(value, row, index) {
				var str = '';
				str += '<div class="btn-group">';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCustomerFunc(2, ' + row.id + ');">查看</button>';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCustomerFunc(3, ' + row.id + ', ' + index + ');">编辑</button>';
			//	str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="auditCustomerFunc('+ row.id + ', ' + index + ');">审核</button>';
			//	str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="forbiddenCustomerFunc('+ row.id + ', ' + index + ');">禁用</button>';
				str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDCustomerFunc(4, ' + row.id + ');">删除</button>';
				str += '<button type="button" class="btn btn-default btn-xs" onclick="cardBind(' + row.id + ', \'' + row.card_no + '\', ' + index + ');">绑定会员卡</button>';
				str += '</div>';
				return str;
			},
        }],
	});
});

/* search */
function queryParams(params) {
    $('#toolbar').find('input[name], select[name]').each(function () {
        params[$(this).attr('name')] = $(this).val();
    });
    return params;
}

function searchFunc() {
	$('#table').bootstrapTable('selectPage', 1);			// IMPORTANT!!!  有刷新功能!!!
}

/* reload */
function reloadFunc() {
	$('#toolbar').resetForm();
	$('#table').bootstrapTable('selectPage', 1);
}
</script>